<template>
  <div class="w">
    <div class="header">
      <i class="iconfont icon-fanhui" @click="back"></i>
      <span class="title">提交订单</span>
    </div>
    <div class="info">
      <div class="address_card">
        <div class="address_card_top" @click="addressShow = true">
          <span>{{ addActive.address }}</span>
          <span><i class="iconfont icon-jinrujiantou"></i></span>
        </div>
        <div class="address_card_middle">
          <span>{{ addActive.people }}</span>
          <span v-if="addActive.sex == 0">先生</span>
          <span v-if="addActive.sex == 1">女士</span>
          <span>{{ addActive.phone }}</span>
          <div class="middle_notice">
            <span>点餐请适量，环保又健康</span>
          </div>
        </div>
        <div class="address_card_bottom">
          <span>立即送出</span>
          <span>预计50分钟送达</span>
        </div>
      </div>
      <div class="dish_card">
        <div class="dish_card_title">
          <span>{{ shopInfo.shopName }}</span>
          <div class="score_right">
            <span v-if="shopInfo.mode == 1">骑手专送</span>
            <span v-if="shopInfo.mode == 0">商家自配</span>
          </div>
        </div>
        <div class="dish_card_info">
          <div class="info_list" v-for="(item, index) in shoppingCartList" :key="index">
            <div class="list_left">
              <el-image :src="item.dishImage" fit="cover"></el-image>
            </div>
            <div class="list_right">
              <div class="info_name">
                <span>{{ item.dishName }}</span>
                <div class="amountPrice">
                  <div class="oldPrice" v-if="item.oldPrice != null">
                    <span>￥</span>
                    <span>{{ item.oldPriceAmount }}</span>
                  </div>
                  <span class="icon">￥</span>
                  <span class="price">{{ item.amount }}</span>
                </div>
              </div>
              <div class="item_right_flavore">
                <span v-for="(it, ind) in item.flavore" :key="ind">{{ it }}</span>
              </div>
              <div class="info_number">
                <span>×{{ item.number }}</span>
              </div>
            </div>
          </div>
          <div class="packing_pay">
            <span>打包费</span>
            <div>
              <span class="icon">￥</span>
              <span class="price">{{ packingAcount }}</span>
            </div>
          </div>
          <div class="delivery_pay">
            <span>用户配送费</span>
            <div>
              <span class="icon">￥</span>
              <span class="price">{{ shopInfo.delivery }}</span>
            </div>
          </div>
        </div>
        <div class="dish_card_bottom">
          <div class="dish_totalPrice">
            <span>小记</span>
            <span>￥</span>
            <span>{{ allPrice }}</span>
          </div>
          <div class="dish_discounts">
            <span>已优惠</span>
            <span>￥</span>
            <span>{{ discounts }}</span>
          </div>
        </div>
      </div>
      <div class="notice_card">
        <div class="remarks">
          <span>备注</span>
          <el-input type="textarea" v-model="remarks"></el-input>
        </div>
      </div>
    </div>
    <div class="cart">
      <div class="cart_left">
        <div class="left_top">
          <span>￥</span>
          <span>{{ allPrice }}</span>
        </div>
        <div class="left_bottom">
          <span>已优惠</span>
          <span>￥</span>
          <span>{{ discounts }}</span>
        </div>
      </div>
      <div class="cart_right" @click="submitOrders">
        <div class="right_active">
          <span>提交订单</span>
        </div>
      </div>
    </div>
    <div class="address" v-if="addressShow">
      <div class="top" @click="addressShow = false"></div>
      <div class="bottom">
        <div class="bottom_title">
          <span>选择收货地址</span>
        </div>
        <div class="bottom_info">
          <div class="bottom_info_list" v-for="(item, index) in addressList" :key="index" @click="addressActive(item)">
            <div class="card_left">
              <div class="card_left_title">
                <span>{{ item.address }}</span>
                <div class="icon" v-if="item.isDefault == 1">
                  <span>默认</span>
                </div>
              </div>
              <div class="card_left_info">
                <span>{{ item.people }}</span>
                <span class="span" v-if="item.sex == 0">先生</span>
                <span class="span" v-if="item.sex == 1">女士</span>
                <span>{{ item.phone }}</span>
              </div>
            </div>
            <div class="card_right" @click.prevent.stop="goNext(item)">
              <i class="iconfont icon-bianji"></i>
            </div>
          </div>
        </div>
        <div class="button">
          <el-button @click="goNext('add')">新增收货地址</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shopInfo: [],
      info: [],
      addressList: [],
      addressShow: false,
      addActive: [],
      shoppingCartList: [],
      packingAcount: 0,
      discounts: 0,
      allPrice: 0,
      ordersParams: {},
      remarks: '',
    };
  },

  created() {
    this.shopInfo = this.$route.query.shopInfo;
    this.info = JSON.parse(localStorage.getItem('userInfo'));
    this.getAddressList();
    this.getShoppingCartList();
  },

  methods: {
    async submitOrders() {
      this.ordersParams = {
        userId: this.info.id,
        orderPrice: this.allPrice,
        addressId: this.addActive.id,
        orderText: this.remarks,
        address: this.addActive.address,
        shoppingCartDtoList: this.shoppingCartList,
        shopId: this.shopInfo.id,
        discounts: this.discounts,
        subject: this.shopInfo.shopName,
      };
      const { data: res } = await this.$http.post('orders/addOrders', this.ordersParams);
      if (res.code == 1) {
        this.$router.push({
          path: '/payConfirm',
          query: {
            shopName: this.shopInfo.shopName,
            address: this.addActive,
            shoppingCart: this.shoppingCartList,
            totalPrice: this.allPrice,
            discounts: this.discounts,
            remarks: this.remarks,
            orderId: res.data.orderId,
          },
        });
      } else {
        return this.$message.error('提交失败');
      }
    },
    getAllPrice() {
      var sum = 0;
      for (let i = 0; i < this.shoppingCartList.length; i++) {
        sum = sum + this.shoppingCartList[i].amount;
      }
      this.allPrice = Math.formatFloat(sum + this.shopInfo.delivery + this.packingAcount, 2);
    },
    getDiscounts() {
      var oldPriceSum = 0;
      for (let i = 0; i < this.shoppingCartList.length; i++) {
        if (this.shoppingCartList[i].oldPrice != null) {
          this.shoppingCartList[i].oldPriceAmount = Math.formatFloat(this.shoppingCartList[i].number * this.shoppingCartList[i].oldPrice, 2);
          oldPriceSum = Math.formatFloat(oldPriceSum + this.shoppingCartList[i].oldPriceAmount - this.shoppingCartList[i].amount, 2);
        }
      }
      this.discounts = oldPriceSum;
    },
    getPackingAcount() {
      this.packingAcount = this.shoppingCartList.length;
    },
    async getShoppingCartList() {
      const { data: res } = await this.$http.get(
        `http://localhost:8080/school/shoppingCart/getShoppingCartList?shopId=${this.shopInfo.id}&userId=${this.info.id}`,
      );
      if (res.code == 1) {
        this.shoppingCartList = res.data;
        this.getPackingAcount();
        for (let i = 0; i < this.shoppingCartList.length; i++) {
          this.shoppingCartList[i].oldPriceAmount = 0;
        }
        this.getDiscounts();
        this.getAllPrice();
        console.log(this.shoppingCartList);
      } else {
        return this.$message.error('信息获取失败');
      }
    },
    addressActive(addressInfo) {
      this.addActive.length = 0;
      this.addActive = addressInfo;
      this.addressShow = false;
    },
    goNext(url) {
      if (url == 'add') {
        this.$router.push('/addAddress');
      } else {
        this.$router.push({ path: '/addAddress', query: { addressInfo: url } });
      }
    },
    back() {
      this.$route.params.shopInfo = this.shopInfo;
      this.$router.back();
    },
    async getAddressList() {
      const { data: res } = await this.$http.get('addressBook/getAddressBookList/' + this.info.id);
      if (res.code == 1) {
        this.addressList = res.data;
        for (let i = 0; i < this.addressList.length; i++) {
          if (this.addressList[i].isDefault == 1) {
            this.addActive = this.addressList[i];
          }
        }
      } else {
        return this.$message.error('信息获取失败');
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.w {
  height: 100vh;
  width: 100%;
  position: relative;
  .header {
    background-color: #f6cd54;
    height: 61px;
    color: #232425;
    text-align: center;
    position: relative;
    border: none;
    .icon-fanhui {
      position: absolute;
      font-size: 25px;
      line-height: 61px;
      left: 10px;
      font-weight: bold;
    }
    .title {
      font-size: 20px;
      line-height: 61px;
      font-weight: bold;
    }
  }
  .info::-webkit-scrollbar {
    display: none;
  }
  .info {
    border: none;
    background: linear-gradient(to top, #f4f4f4, 90%, #f6cd54);
    padding: 15px;
    height: calc(100vh - 90px);
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    .address_card {
      background-color: #fefefe;
      border-radius: 10px;
      padding: 15px;
      .address_card_top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #000000;
        margin-bottom: 10px;
        span:nth-child(1) {
          font-size: 23px;
        }
        span:nth-child(2) {
          color: #bebebe;
        }
      }
      .address_card_middle {
        color: #868788;
        letter-spacing: 1px;
        span:nth-child(1) {
          margin-right: 5px;
        }
        span:nth-child(2) {
          margin-right: 10px;
        }
        .middle_notice {
          color: #7dba65;
          font-size: 13px;
          margin-top: 5px;
          margin-bottom: 10px;
        }
      }
      .address_card_bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #000000;
        letter-spacing: 1px;
        margin-top: 20px;
        margin-bottom: 8px;
        span:nth-child(2) {
          color: #ee8834;
        }
      }
    }
    .dish_card {
      background-color: #fefefe;
      border-radius: 10px;
      padding: 15px;
      margin-top: 10px;
      .dish_card_title {
        border-bottom: 1px solid #f6f2f2;
        height: 35px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        line-height: 35px;
        color: #252627;
        .score_right {
          border: 1px solid #ebe5d5;
          background-color: #fefffd;
          color: #ed8c3b;
          font-size: 5px;
          padding: 0px 4px;
          border-radius: 5px;
          height: 20px;
          line-height: 20px;
        }
      }
      .dish_card_info {
        margin-top: 20px;
        .icon {
          font-size: 10px;
          margin-right: 2px;
        }
        .price {
          font-size: 17px;
        }
        .info_list {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          .list_left {
            height: 60px;
            width: 60px;
            margin-right: 10px;
            :deep(.el-image) {
              height: 100%;
              width: 100%;
              border-radius: 10px;
            }
          }
          .list_right {
            .info_name {
              display: flex;
              justify-content: space-between;
              align-items: center;
              width: 260px;
              color: #000000;
              font-size: 17px;
              .amountPrice {
                display: flex;
                align-items: baseline;
                .oldPrice {
                  margin-right: 10px;
                  span:nth-child(1) {
                    color: #939393;
                    font-size: 5px;
                    text-decoration: line-through;
                  }
                  span:nth-child(2) {
                    color: #939393;
                    font-size: 13px;
                    text-decoration: line-through;
                  }
                }
              }
            }
            .item_right_flavore {
              font-size: 12px;
              color: #8f8f8f;
            }
            .info_number {
              color: #a4a4a4;
              font-size: 15px;
            }
          }
        }
        .packing_pay {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 20px;
          margin-bottom: 10px;
        }
        .delivery_pay {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20px;
        }
      }
      .dish_card_bottom {
        display: flex;
        border-top: 1px solid #f6f2f2;
        height: 45px;
        line-height: 45px;
        flex-direction: row-reverse;
        .dish_discounts {
          margin-right: 15px;
          span:nth-child(1) {
            color: #000000;
            margin-right: 2px;
          }
          span:nth-child(2) {
            font-size: 10px;
            color: #e75a4c;
          }
          span:nth-child(3) {
            color: #e75a4c;
          }
        }
        .dish_totalPrice {
          span:nth-child(1) {
            color: #000000;
            margin-right: 15px;
          }
          span:nth-child(2) {
            font-size: 12px;
            color: #000000;
          }
          span:nth-child(3) {
            color: #000000;
            font-size: 19px;
          }
        }
      }
    }
    .notice_card {
      background-color: #fefefe;
      margin-top: 15px;
      border-radius: 10px;
      .remarks {
        padding: 15px;
        span {
          color: #000000;
          font-weight: bold;
          letter-spacing: 2px;
          font-size: 17px;
        }
        :deep(.el-textarea__inner) {
          margin-top: 10px;
          border: none;
          height: 150px;
        }
      }
    }
  }
  .cart {
    background-color: #323232;
    position: absolute;
    bottom: 20px;
    width: 360px;
    height: 55px;
    left: 15px;
    border-radius: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .cart_left {
      color: #fefefe;
      margin-left: 25px;
      .left_top {
        span:nth-child(1) {
          font-size: 13px;
        }
        span:nth-child(2) {
          font-size: 20px;
        }
      }
      .left_bottom {
        color: #929292;
        font-size: 13px;
      }
    }
    .cart_right {
      background-color: #f5c862;
      height: 100%;
      width: 110px;
      border-top-right-radius: 50px;
      border-bottom-right-radius: 50px;
      .right_active {
        text-align: center;
        line-height: 55px;
        font-size: 18px;
        font-weight: bold;
      }
    }
  }
  .address {
    z-index: 99;
    position: absolute;
    bottom: 0px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    .top {
      height: 420px;
    }
    .bottom {
      height: 425px;
      padding: 0px 15px;
      background-color: #fefefe;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
      .bottom_title {
        height: 40px;
        text-align: center;
        line-height: 40px;
        font-size: 18px;
        color: #000000;
      }
      .bottom_info::-webkit-scrollbar {
        display: none;
      }
      .bottom_info {
        width: 100%;
        height: 300px;
        overflow: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        .bottom_info_list {
          border-bottom: 2px solid #f4f4f4;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 15px;
          .card_left {
            .card_left_title {
              font-size: 17px;
              font-weight: bold;
              color: #393939;
              letter-spacing: 1px;
              margin-bottom: 8px;
              display: flex;
              .icon {
                border: 1px solid #ffc200;
                border-radius: 5px;
                width: 35px;
                text-align: center;
                padding: 2px 0px;
                font-size: 13px;
                color: #ffc200;
                line-height: 16px;
                height: 15px;
                margin-left: 5px;
              }
            }
            .card_left_info {
              color: #a2a2a2;
              font-size: 15px;
              margin-bottom: 10px;
              .span {
                margin-left: 15px;
                margin-right: 40px;
              }
            }
          }
          .card_right {
            .icon-bianji {
              font-size: 18px;
              color: #979797;
            }
          }
        }
      }
      .button {
        :deep(.el-button) {
          position: absolute;
          bottom: 20px;
          background-color: #ffc200;
          height: 50px;
          width: 360px;
          border-radius: 50px;
          font-size: 16px;
        }
      }
    }
  }
}
</style>